<template>
    <div class="selectDown" :style="select_style">
        <!-- 下拉框选中显示框 -->
        <div :class="'select_main'+select_class" @click="activeSelect()">
            <div class="select_content">
                <span v-if="mainValue != null">{{mainValue}}</span>
                <span v-else>
                    <slot name="main_value">请选择</slot>
                </span>
                
            </div>
            <div class="select_icon">
                <i class="bi bi-chevron-compact-down"></i>
            </div>
        </div>
        <!-- 下拉框选择列表 -->
        <transition name="select_tran">
            <div :class="'select_list'+select_class" v-if="flag">
                <div v-if="data != null && data.length > 0">
                    <div class="se_item" v-for="(item,index) in data" :key="index" @click="choose(item)" >
                        {{item.content}}
                    </div>
                </div>
                <div v-else>
                    <slot name="select_item"></slot>
                </div>
                
            </div>
        </transition>
        
    </div>
</template>
<script>
import {ref} from 'vue';
export default {
    name:'g-select',
    props:{
        select_class:{
            type:String,
            default:''
        },
        select_style:{
            type:String,
            default:''
        },
        data:{
            type:Array,
            default:[]
        }
    },
    setup(props){
        let flag = ref(false);
        let mainValue = ref(null);
        
        // 显示下拉菜单
        let activeSelect = ()=>{
            console.log("--------1")
            flag.value = !flag.value;
        }
        // 选中某条数据
        let choose = (item)=>{
            console.log("--------2")
            mainValue.value = item.content;
            flag.value = !flag.value;
        }
        return {
            flag,
            mainValue,
            activeSelect,choose,
            props
        }
    }
}
</script>
<style scoped>
    .selectDown{
        width:200px;
    }
    .select_main{
        width: 100%;
        padding: 10px 0;
        background-color:var(--normal-background);
        color: var(--default-font-color);
        font-size: 18px;
        position: relative;
        margin-bottom: 5px;
        border-radius: 3px;
    }
    .select_main_dark{
        width: 100%;
        padding: 10px 0;
        background-color:var(--default-background-dark);
        color: white;
        font-size: 18px;
        position: relative;
        margin-bottom: 5px;
        border-radius: 3px;
    }
    
    .select_content{
        padding-left: 10px;
        padding-right: 38px;
    }
    .select_icon{
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
    }
    .select_list{
        border-radius: 3px;
        width: 100%;
        background: var(--normal-background);
        cursor: pointer;
        overflow-y: auto;
        max-height: 200px;
        padding: 5px 0;
    }

    .select_list .se_item,
    .select_list_dark .se_item{
        transition:all 0.3s;
        border-radius: 3px;
        padding: 8px;
        margin: 0 5px;
    }
    .select_list .se_item:hover{
        background-color: var(--default-background-dark);
        color: white;

    }
    /* ---------------------------------------- */
    .select_list_dark{
        border-radius: 3px;
        width: 100%;
        background: var(--default-background-dark);
        color: white;
        cursor: pointer;
        overflow-y: auto;
        /* height: 170px; */
        max-height: 200px;
        padding: 5px 0;
    }
    .select_list_dark .se_item:hover{
        background-color: var(--normal-background);
        color: var(--default-font-color);

    }

    .select_tran-enter-active,
    .select_tran-leave-active{
        transition: all 0.3s;
    }
    .select_tran-enter-from,
    .select_tran-leave-to{
        max-height: 0;
        padding: 0;
    }
    .select_list::-webkit-scrollbar,
    .select_list_dark::-webkit-scrollbar{
        display: none;
    }
</style>